<script setup>
    import { getCurrentInstance, inject, ref } from 'vue';
    import { useRoute, useRouter} from 'vue-router';
    import { computedPlayTime } from '../../../tools/play.js'
    const axios = getCurrentInstance().proxy.$http;
    const emitter = inject('emitter');
    const route = useRoute();
    const router = useRouter();

    // 歌曲列表
    const playlistId = route.query.id;
    const songs = ref(); 
    const getPlaylistData = async () => {
        emitter.emit('discoverNavStyleToggle', 100) 
        const res = await axios.get(`playlist/track/all?id=${playlistId}`);
        songs.value = res.data.songs;
    }
    getPlaylistData();

    // 获取播放次数
    const playCount = ref();
    playCount.value = localStorage.getItem('playCount');

    // 播放
    const play = (id) => {
        emitter.emit('play', id)
    }
    const toSong = (id) => {
        router.push({
            name: 'song',
            query: { id }
        })
    }
</script>

<template>
    <section class="bottom">
        <header>
            <div class="left">
                <h3>歌曲列表</h3>
                <span>
                    <i>{{songs?.length}}</i>
                    <span>首歌</span>
                </span>
            </div>
            <div class="right">
                播放:<span>{{playCount}}</span>次
            </div>
        </header>                
        <div class="table">
            <div class="table-header">
                <div class="number"></div>
                <div class="song-title">歌手标题</div>
                <div class="time">时长</div>
                <div class="singer">歌手</div>
                <div class="album">专辑</div>
            </div>
            <!-- 列表内容部分 -->
            <ul v-show="songs">
                <li
                    v-for="(item, index) of songs" 
                >
                    <div class="number">
                        <span>{{index + 1}}</span>
                        <img 
                            src="./../../../assets/img/play-circle.png"
                            @click="play(item.id)"
                        >
                    </div>
                    <div class="song-title">
                        <span @click="toSong(item.id)">{{item.name}}</span>
                    </div>
                    <div class="time">{{computedPlayTime(item.dt)}}</div>
                    <div class="singer">
                        <template
                            v-for="(value, index) of item.ar" 
                        >
                            <span v-if="index != 0">/</span>
                            <span>{{value.name}}</span>
                        </template>
                    </div>
                    <div class="album">{{item.al.name}}</div>
                </li>
            </ul>
            <loading v-show="!songs"></loading>
        </div>
    </section>
</template>

<style lang='less' scoped>
    .bottom{
        width: 100%;
        header{
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2.5px solid #c20c0c;
            .left{
                h3{
                    font-size: 20px;
                    float: left;
                    margin-right: 20px;
                    font-weight: 500;
                }
                span{
                    display: inline-block;
                    margin-top: 4px;
                    font-size: 12px;
                    i{
                        font-style: normal;
                    }
                }
            }

            .right{
                font-size: 12px;
                span{
                    color: #c20c0c;
                    margin: 0 5px;
                    font-weight: 600;
                }
            }
        }
        
        .table{
            border: 1px solid #ccc;
            border-top: none;
            .table-header{
                user-select: none;
                background: linear-gradient(to bottom, white, rgb(236, 236, 236), white);
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #ccc;
                display: flex;
                div{
                    border-right: 1px solid #ccc;
                    font-size: 13px;
                    text-indent: 10px;
                }
                .number{
                    width: 75px;
                }
                .song-title{
                    flex-grow: 1;
                }
                .time{
                    width: 100px;
                }
                .singer{
                    width: 110px;
                }
                .album{
                    width: 110px;
                    border: none;
                }
            }
            ul{
                li{
                    user-select: none;
                    height: 30px;
                    line-height: 30px;
                    display: flex;
                    div{
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        font-size: 12px;
                        color: rgb(73, 73, 73);
                        text-indent: 10px;
                    }
                    &:nth-child(2n+1) {
                        background-color: #f7f7f7;
                    }
                    .number{
                        display: flex;
                        align-items: center;
                        width: 75px;
                        span{
                            color: rgb(168, 168, 168);
                        }
                        img{
                            margin-left: auto;
                            margin-right: 10px;
                            width: 19px;
                            height: 19px;
                            cursor: pointer;
                        }
                    }
                    .song-title{
                        width: 222px;
                        span{
                            &:hover{
                                text-decoration: underline;
                                cursor: pointer;
                            }
                        }
                    }
                    .time{
                        width: 100px;
                    }
                    .singer{
                        width: 110px;
                    }
                    .album{
                        width: 110px;
                        border: none;
                    }
                }
            }

        }
    }
</style>